<template>
	<view class="flex column center">
		<view class="flex column margin_header" style="width: 500rpx;">
			<view class="flex row" style="width:450rpx;height: 50px;">
				<u-text text="今天吃" size="23"></u-text>
				<u-text :text=selectMeau size="20"></u-text>
			</view>
			<view class="margin_top">
				<u-button  :text=StartOrPause shape="circle" @click="isStart" type="primary"></u-button>
				<u-text text="{当前候选菜单}" plain plainFill @click="show =true" size="large"></u-text>
			</view>



			<view class="margin_top">
				<u-button text="添加想吃的" type="success" @click="show1=true" shape="circle" c></u-button>
			</view>


			<!-- 候选弹窗 -->
			<u-popup :show="show" :round="15" :overlayOpacity="0.2" @close="close" mode="center" @open="open">
				<view class="flex" style="width: 400rpx; margin: 20px 30rpx;">
					<u-text  :text=shoreMean size="18" lineHeight="55rpx"
						margin="10rpx"></u-text>
				</view>
			</u-popup>

			<!-- 添加菜单弹窗 -->
			<u-popup :show="show1" :round="15" :overlayOpacity="0.2" @close="close" mode="center" @open="open">
				<view class="flex column center" style="margin: 20px 30rpx;width:400rpx">
					<u--input style="height: 50rpx;" placeholder="请输入你要添加的菜单" border="surround" type=text
						v-model="inputValue" @change="change"></u--input>
						
						<view class="margin_top">
							<u-button  type="success" shape="circle" @click="addMean" >添加</u-button>
						</view>
						
				</view>
				
			</u-popup>
			<u-notify ref="uNotify"></u-notify>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dafaultIndex: [0],
				selectMeau: "螺蛳粉",
				mean: ["螺蛳粉", "海底捞", "海鲜", "泡面", "面包", "桂林米粉", "五谷鱼粉", "烤肉饭", "麻辣烫", "烧鸭粉", "粥", "云吞", "麻辣香锅",
					"隆江猪脚饭", "汉堡", "炸鸡", "重庆小面","华莱士","木桶饭","快餐","煲仔饭","披萨","冒菜","海底捞火锅","小龙坎火锅","北京烤鸭饭","热干面","小吃","卤菜"
				],
				timer: null,
				value: 0,
				shoreMean: '', //候选菜单
				flag: true, //开关的标识符
				StartOrPause: '开始', //默认为开始
				show: false,
				show1: false,
				inputValue: null,
				messageShow: true,
				
				

			}
		},
		onLoad() {

		},
		onReady() {

		},
		methods: {
			change(e) {
				console.log('change', e);
				this.inputValue = e;
			},
			valChange() {
				this.value++;
				console.log(this.mean[this.value])
				this.selectMeau = this.mean[Math.floor(Math.random() * (this.mean.length))];
				console.log(this.selectMeau);
			},
			isStart() {
				if (this.flag == true) {
					console.log("开始选")
					this.StartOrPause = '结束';
					this.flag = false;
					if (this.timer != null) {
						//清除之前的定时器id，保留当前最新的id
						clearInterval(this.timer);
					}
					this.timer = setInterval(this.valChange, 50);
				} else {

					this.StartOrPause = '开始';
					this.flag = true;
					//清除定时器
					clearInterval(this.timer);
					this.timer = null;
					console.log("结束了，就选这个吧");
				}

			},
			addMean() {
				// console.log("添加菜单", this.inputValue);
				this.show1 = false;
				var i;
				
				if(this.inputValue!=null){
					this.mean.push(this.inputValue);
					const result = Array.from(new Set(this.mean))
					console.log("候选的菜单里有", this.mean);
					for (i = 0; i < this.mean.length; i++) {
						this.shoreMean += this.mean[i] + " "
					}
					//把输入框的值添加到数组里
					//去除重复值
					this.$refs.uNotify.show({
						top: 5,
						type: 'success',
						color: '#000',
						bgColor: '#e1e8e8',
						message: '成功',
						duration: 1000 * 3,
						fontSize: 15,
						safeAreaInsetTop: true
					})
				}else{
					console.log("你还没写什么")
					this.$refs.uNotify.show({
						top: 5,
						type: 'error',
						color: '#000',
						bgColor: '#fa3534',
						message: '没添加',
						duration: 1000 * 3,
						fontSize: 15,
						safeAreaInsetTop: true
					})
				}
				



			},

			showData() {
				var i;
				for (i = 0; i < this.mean.length; i++) {
					this.shoreMean += this.mean[i] + " "
				}
				console.log("候选菜单", this.shoreMean)
			},
			toDrink() {
				uni.navigateTo({
					url: "/pages/drink/drink",
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false;
				this.show1 = false;
				// console.log('close');
			}


		},
		mounted() {
			this.showData();
		},
		beforeDestroy() {
			clearTimeout(this.timer);
		},

	}
</script>

<style>
	/* 	* {
		margin: 0;
		padding: 0;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.v_text {
		display: flex;
		flex-direction: row;
	}

	.view_center {
		height: 500rpx;
		width: 500rpx;
	}

	.btn_width {
		width: 250rpx;
	}

	.btn_margin {
		margin-top: 350rpx;
	}

	.mar {
		margin-top: 150rpx;
	}

	.v_popup {
		height: 450rpx;
		width: 450rpx;
	} */
</style>